<template>
  <div class="melody" ref="melody">
    <div class="m-text">
      <p>地球一刻不停地转动</p>
      <p>生活马不停蹄地向前</p>
      <p class="keyword">今年，你辛苦了</p>
      <p>点击下方，领取你的专属主旋律吧</p>
    </div>

    <img class="m-bg" src="@/assets/img/melody/bg-planet.png" />
    <img class="m-decorate" src="@/assets/img/melody/decorate-planet.png" alt="" />
    <img class="m-bg-top" src="@/assets/img/melody/bg-top.png" />
    <!-- <img
      class="m-button"
      src="@/assets/img/melody/button-planet.png"
      @click="clickButton"
    /> -->
    <div ref="buttonPlanet" class="m-button" @click="clickButton">
      <div>
        <p class="m-b-first-line">领取</p>
        <p class="m-b-second-line">专属主旋律</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import lottie from "lottie-web";
import buttonPlanetJson from "@/assets/img/melody/data.json";
import { slideDown } from "@/utils/slide";
import { changeStatusBarColor } from "@/cordova/common";

const emit = defineEmits(["clickButton", "slideDown"]);

onMounted(() => {
  slideDown(melody.value, () => {
    console.log("travel");
    emit("slideDown");
  });
  // lottie动画初始
  lottie.loadAnimation({
    container: buttonPlanet.value,
    renderer: "svg",
    loop: true,
    autoplay: true,
    animationData: buttonPlanetJson, // the path to the animation json
  });
  changeStatusBarColor([28, 74, 188, 1]);
});

const melody = ref(null);

const buttonPlanet = ref(null);

const clickButton = (e) => {
  console.log("213321");
  e.stopPropagation();
  emit("clickButton");
};
</script>

<script lang="ts">
export default {
  name: "MelodyPage",
};
</script>

<style lang="scss" scoped>
.melody {
  @include full-screen-relative;
}

.m-text {
  @include animation-fade-in;
  position: absolute;
  top: 170px;
  left: 64px;
  z-index: 999;
  font-size: 30px;
  font-family: ChangAnunitype;
  color: #ffffff;
  line-height: 50px;

  p {
    margin-top: 10px;

    &:first-child {
      margin-top: 0;
    }
  }
}

.m-bg {
  @include animation-up-down-shake;
  position: absolute;
  bottom: 345px;
  left: 0;
  height: 575px;
  width: 100vw;
}

.m-decorate {
  position: absolute;
  top: 168px;
  right: 25px;
  width: 276px;
  height: 214px;
}

.m-button {
  position: absolute;
  bottom: 108px;
  left: 101px;
  z-index: 999;
  height: 329px;
  width: 575px;

  div {
    position: absolute;
    z-index: 999;
    bottom: 112px;
    left: 198px;
  }

  p {
    font-size: 36px;
    font-family: ChangAnunitype;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0px 0px 6px rgba(186, 105, 13, 0.7);
    text-align: center;

    &:first-child {
      margin-bottom: 20px;
    }
  }
}

.m-bg-top {
  position: top;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100vw;
  height: 519px;
}
</style>
